<template>
  <div>
    <div class="kc">
      <span>特色课</span>
      <van-icon name="search" @click="$router.push('/search')" />
    </div>

    <div>
      <van-dropdown-menu>
        <!-- 分类 -->
        <van-dropdown-item v-model="value" :options="option1" />
        <!-- 排序 -->
        <van-dropdown-item v-model="value" :options="option2" />
        <!-- 筛选 -->
        <van-dropdown-item title="筛选" v-model="list">
          <div class="shaix">
            <div v-for="item in  courseList" :key="item.id" @click="clicksx(item.id)">
              {{item.name}}
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="count_one">
      <div class="count" v-for="item in courseBasis" :key="item.id" @click="details(item.id)">
        <p>{{item.title}}</p>
        <p><span>{{item.start_play_date}}</span> | <span>共{{item.sales_num}}课时</span></p>
        <div><img :src="item.teachers_list.teacher_avatar" alt=""><span></span>
        </div>
        <p><span>{{item.browse_num}}人已报名</span><span>免费</span></p>
      </div>
    </div>
    <!-- <div class="course-rxf3" @scroll.passive="getScroll($event)">
      <ul v-for="(item,key) in list" :key="key" class="course-rxful" @click="edd(item)">
        <li>
          <p>{{item.title}}</p>
          <p>共{{item.browse_base}}课时</p>
          <ul>
            <li v-for="(item,key) in item.teachers_list" v-show="key<3" :key="key"
              style="display: flex;width: 100%;height: 40px">
              <img class="img1" :src="item.teacher_avatar" alt />
              <span>{{item.teacher_name}}</span>
            </li>
          </ul>
          <hr style="color: #f2f2f2" />

          <p class="course-rxfp">
            <span class="a2">共有{{item.total_periods}}人报名</span>
            <span class="a2" style="float: right;color: green">免费</span>
          </p>
        </li>
      </ul>
    </div> -->

  </div>
</template>

<script>
import { Icon, DropdownMenu, DropdownItem, Button, Tag } from "vant";
import { courseClassify, courseBasis } from "../../api/api"
export default {
  // 按需引入“vant”
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Tag.name]: Tag,
  },
  data () {
    return {
      value: 0,
      list: "",
      option1: [
        { text: '全部', value: 0 },
        { text: '新款', value: 1 },
        { text: '活动', value: 2 },
      ],
      option2: [
        { text: '默认', value: 0 },
        { text: '最新', value: 1 },
        { text: '最热', value: 2 },
        { text: '价格从低到高', value: 3 },
        { text: '价格从高到低', value: 4 },
      ],
      courseBasis: [],
      courseList: [],//筛选数据
    };
  },
  methods: {
    onConfirm () {
      this.$refs.item.toggle();
    },
    details (id) {
      console.log(id);
      this.$router.push("/detail?id=" + id)
    },
    clicksx (id) {
      //   console.log(id);
      this.list = id
    }
  },

  //   课程分类
  mounted () {
    courseClassify().then(res => {
      //   console.log(res);
      this.courseList = res.data.data.appCourseType
      console.log(this.courseList);
    })
    // 课程列表
    courseBasis().then(res => {
      //   console.log(res);
      this.courseBasis = res.data.data.list
      console.log(this.courseBasis);
    })
  },

}
</script>

<style  scoped>
* {
  box-sizing: border-box;
}
.kc {
  position: relative;
  text-align: center;
  line-height: 1.5rem;
  color: white;
  font-size: 0.533333rem;
  width: 100%;
  height: 1.5rem;
  background: rgb(230, 180, 180);
}
.van-icon {
  position: absolute;
  right: 0.4rem;
  top: 30%;
}
.count_one {
  background: rgb(236, 232, 232);
}

.count {
  width: 93%;
  margin: 0 auto;
  background: #fff;
  height: 4.8rem;
  margin: 0.4rem auto;
  border-radius: 0.16rem;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
}
.count img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
.shaix {
  display: flex;
  flex-wrap: wrap;
}
.shaix div {
  margin: 0.133333rem;
  width: 2rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.4rem;
  border: 1px solid #ccc;
}
</style>